<template>
  <div class="grey-cloth-sample">
    <div v-show="sampleData.length > 0" v-for="row in sampleData" :key="row.id" style="padding-bottom: 0.5rem">
      <div :class="renderClassFn(row)" class="data-card">
        <div style="flex: 1; flex-flow: column;">
          <div style="border-bottom: 1px solid #8191c5; display: flex;justify-content: space-between;align-items: center;">
            <span style="color: #8191c5;font-size: 1rem;">{{ row.no }}</span>
            <van-checkbox shape="square" v-if="select" v-model="row.selected" @click="e => selectSampleFn(row, e)"></van-checkbox>
          </div>
          <div style="display:flex; justify-content: space-between;">
            <span style="color: #bb5a09;font-size: 1rem; ">{{ row.colorNo }}</span>
            <span style="color: #bb5a09;font-size: 1rem; ">{{ row.lonNum }}根</span>
            <span style="color: #bb5a09;font-size: 1rem; ">{{ row.remainMetre }}米</span>
          </div>
          <div v-if="showYarn" class="yarn">
            <div class="label">
              <span>经纱</span>
            </div>
            <div v-for="lon in row.lonYarn">
              <div class="no">
                <span>{{ lon.yarnNo }}</span>
              </div>
              <div class="other">
                <span>{{ lon.color }}</span>
                <span>{{ lon.standard + SPLIT_XG + lon.strandNum }}</span>
                <span>{{ lon.composition }}</span>
              </div>
            </div>
          </div>
          <div v-if="showYarn" class="yarn">
            <div class="label">
              <span>纬纱</span>
            </div>
            <div v-for="lat in row.latYarn">
              <div class="no">
                <span>{{ lat.yarnNo }}</span>
              </div>
              <div class="other">
                <span>{{ lat.color }}</span>
                <span>{{ lat.standard + SPLIT_XG + lat.strandNum }}</span>
                <span>{{ lat.composition }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {loadGreyClothSampleData} from "@/views/weaving/weaving";
import {SPLIT_BLANK, SPLIT_XG} from "@/api/enum";

export default {
  name: "greyClothSample",
  props: {
    greyClothId: {
      type: Number,
      default: 0
    },
    showYarn: {
      type: Boolean,
      default: true,
    },
    select: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      SPLIT_BLANK, SPLIT_XG,
      /* 查询定时 */
      queryTimer: null,

      /* 列表相关 */
      sampleData: [],

      /* */
      selected: SPLIT_BLANK
    }
  },
  mounted() {
    const that = this;
    that.initFn(that);
  },
  methods: {
    /* 初始化 */
    initFn() {
      const that = this;
      that.loadGreyClothSampleDataFn();
    },

    /* 加载样品数据 */
    loadGreyClothSampleDataFn() {
      const that = this;
      that.sampleData.splice(0, that.sampleData.length);
      loadGreyClothSampleData({
        greyClothId: that.greyClothId
      }, data => {
        data.forEach(sample => {
          sample.selected = false;
          that.sampleData.push(sample);
        });
      });

    },

    /* 渲染 */
    renderClassFn(row) {
      if(row.status == 1) {
        return "status-to-check";
      } else if(row.status == 2) {
        return "status-to-procure";
      } else if(row.status == 3) {
        return "status-in";
      } else if(row.status == 5) {
        return "status-reject";
      } else {
        return "";
      }
    },

    /* 选中样品 */
    selectSampleFn(row, e) {
      const that = this;
      that.$emit("selected", that.sampleData, row);
    }
  }
}
</script>

<style lang="scss" scoped>
.grey-cloth-sample {
  .data-card {
    width: 96vw;
    padding: 0 0.8rem;
    margin-left: 2vw;
    //background-color: white;
    margin-top: 0.5rem;
    box-shadow: 0.3rem 0.5rem 0.3rem #888888;
    .yarn {
      .label {
        margin-top: 1vh;
        margin-left: 4vw;
        display: flex;
        justify-content: center;
        width: 80vw;
        border-bottom: 1px dashed #52dc32;
      }
      .no {
        color: #704f19;
        font-size: 1rem;
      }
      .other {
        color: #e6a23c;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>